.duanzi {
	width: 90%;
	margin: 20px auto;
	font: 12px/1.5 Tahoma, Helvetica, Arial, "宋体", sans-serif;
}

.duanzi ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	list-style: none;
}

.duanzi ul li {
	width: 300px;
	height: 240px;
	margin: 20px;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	padding: 5px;
	border: 5px solid transparent;
	background: linear-gradient(white, white) padding-box,
		repeating-linear-gradient(
				-45deg,
				red 0,
				red 12.5%,
				transparent 0,
				transparent 25%,
				#58a 0,
				#58a 37.5%,
				transparent 0,
				transparent 50%
			)
			0/5em 5em;
}

.duanzi ul li:hover {
	cursor: pointer;
	background: rgb(241, 236, 236);
}

.duanzi ul li h1 {
	text-align: center;
}

.duanzi ul li p {
	line-height: 25px;
	text-indent: 30px;
}

.duanzi .model {
	position: fixed;
	top: 20%;
	left: 40%;
	width: 400px;
	border: 5px solid gold;
	background: linear-gradient(#00faff, #00faff) left top,
		linear-gradient(#00faff, #00faff) left top,
		linear-gradient(#00faff, #00faff) right top,
		linear-gradient(#00faff, #00faff) right top,
		linear-gradient(#00faff, #00faff) left bottom,
		linear-gradient(#00faff, #00faff) left bottom,
		linear-gradient(#00faff, #00faff) right bottom,
		linear-gradient(#00faff, #00faff) right bottom;
	background-size: 5px 20px, 20px 5px;
}

.duanzi .model h1 {
	text-align: center;
}

.duanzi .model h2 {
	float: right;
}

.duanzi .model h2:hover {
	cursor: pointer;
}

.duanzi .bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
}
